<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <el-main>
      <el-row :gutter="20">
        <el-col :span="18">
          <el-card class="box-card" style="height: 148px">
            <div class="banner">
              <img src="@/assets/bannerl.png" alt="" class="img-left" />
              <img src="@/assets/banner2.png" alt="" class="img-right" />
              <img
                src="http://www-wms-java.itheima.net/img/avatar@2x.4f4a758f.png"
                alt=""
                class="user-header"
              />
              <p class="user-title">仓储管理员</p>
              <p class="subject-title">我不是为了输赢，我就是认真！</p>
              <p class="subject-author">—— 罗永浩</p>
              <div class="site">
                <p class="title">北京总仓</p>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card class="box-card" style="height: 451px">
            <div class="note">
              <div class="subject">通知/公告</div>
              <div class="item">
                <div class="hr"></div>
                <div class="titl">紧急盘点通知</div>
                <div class="time">2020.12.30 18:23:14</div>
              </div>
              <div class="item">
                <div class="hr"></div>
                <div class="titl">运维服务更新通知</div>
                <div class="time">2021.01.25 18:23:14</div>
              </div>
              <div class="item">
                <div class="hr"></div>
                <div class="titl">客户入库变更通知</div>
                <div class="time">2021.01.26 18:23:14</div>
              </div>
              <div class="item">
                <div class="hr"></div>
                <div class="titl">五一放假通知</div>
                <div class="time">2021.02.15 18:23:14</div>
              </div>
              <div class="item">
                <div class="hr"></div>
                <div class="titl">品达物流系统对接通知</div>
                <div class="time">2021.3.25 18:23:14</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-card
            class="box-card"
            style="height: 282px; transform: translateY(-100%)"
          >
            <div class="sub">待办信息</div>
            <el-row :gutter="20">
               <el-col :span="8">
                <el-card style="height: 186px" class="card" shadow="hover">
                  <div style="display: flex">
                    <i class="el-icon-document-copy item1 icon"></i>
                    <div class="tl">入库单</div>
                  </div>
                  <div class="bottom">
                    <span class="spanlabel">新增</span>
                    <span class="spanValue">3</span>
                    <span class="spanlabel">待审核</span>
                    <span class="spanValue" style="color: rgb(0, 118, 255)"
                      >3</span
                    >
                  </div>
                </el-card>
              </el-col>
                <el-col :span="8">
                <el-card style="height: 186px" class="card" shadow="hover">
                  <div style="display: flex">
                    <i class="el-icon-document item1 icon" style="background: rgb(255, 178, 0);"></i>
                    <div class="tl">出库单</div>
                  </div>
                  <div class="bottom">
                    <span class="spanlabel">新增</span>
                    <span class="spanValue">1</span>
                    <span class="spanlabel">待审核</span>
                    <span class="spanValue" style="color: rgb(255, 178, 0)"
                      >1</span
                    >
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card style="height: 186px" class="card" shadow="hover">
                  <div style="display: flex">
                    <i class="el-icon-document-remove item1 icon" style="background: rgb(255, 113, 0);"></i>
                    <div class="tl">盘点单</div>
                  </div>
                  <div class="bottom">
                    <span class="spanlabel">新增</span>
                    <span class="spanValue">6</span>
                    <span class="spanlabel">待审核</span>
                    <span class="spanValue" style="color: rgb(255, 113, 0)"
                      >6</span
                    >
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="24">
          <el-card
            class="box-card"
            style="height: 188px; transform: translateY(-140%)"
          >
             <div class="sub">任务导航</div>
                <el-col style="width:312px">
                <el-card style="height: 93px" class="card" shadow="hover">
                 <div class="icon1">
                  <i class="
el-icon-truck iconi"></i>
                 </div>
                 <div class="shou">收货任务</div>
                </el-card>
              </el-col>
                <el-col style="width:312px">
                <el-card style="height: 93px" class="card" shadow="hover">
                 <div class="icon1" style="background: rgb(82, 212, 243)">
                  <i class="
el-icon-wallet iconi"></i>
                 </div>
                 <div class="shou">上架任务</div>
                </el-card>
              </el-col>
                <el-col style="width:312px">
                <el-card style="height: 93px" class="card" shadow="hover">
                 <div class="icon1" style="background:rgb(255, 113, 0)">
                  <i class="
el-icon-discount iconi"></i>
                 </div>
                 <div class="shou">盘点任务</div>
                </el-card>
              </el-col>
                <el-col style="width:312px">
                <el-card style="height: 93px" class="card" shadow="hover">
                 <div class="icon1" style="background: rgb(255, 96, 158)">
                  <i class="
el-icon-set-up iconi"></i>
                 </div>
                 <div class="shou">拣货任务</div>
                </el-card>
              </el-col>
                <el-col style="width:312px">
                <el-card style="height: 93px" class="card" shadow="hover">
                 <div class="icon1" style="background:rgb(255, 178, 0)">
                  <i class="
el-icon-postcard iconi"></i>
                 </div>
                 <div class="shou">交接任务</div>
                </el-card>
              </el-col>

          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-card

            class="box-card"
            style="height: 500px; transform: translateY(-50%)"
          >
             <div class="sub">入库/出库信息</div>
           <div class="chart-box" style="height: 430px" ref='card'></div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card
            class="box-card"
            style="height: 354px; transform: translateY(-65%)"
          >
          <div class="sub">库存使用情况</div>
            <div></div>
          </el-card>
        </el-col>

        <el-col :span="16">
          <el-card
            class="box-card"
            style="height: 354px; transform: translateY(-65%)"
          >
          <div class="sub">库区使用情况</div>
            <div></div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  mounted () {
    const myEcharts = echarts.init(this.$refs.card)
    // 绘制图表
    myEcharts.setOption({
      title: {
        // text: '化坤在线教学'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    })
  }
}
</script>

<style lang="less" scoped>
.banner {
  position: relative;
  width: 104%;
  height: 148px;
  background: linear-gradient(270deg, #ffc771, #ffa634);
  box-shadow: 0 0 6px 0 rgb(188 151 69 / 12%);

  margin-left: -20px;
  margin-top: -20px;
}
.el-card {
  border-radius: 12px;
}
.img-left {
  position: absolute;
  top: 0;
  left: 0;
  height: 148px;
}
.img-right {
  position: absolute;
  top: 0;
  right: 0;
  height: 148px;
}
.user-header {
  position: absolute;
  top: 31px;
  left: 43px;
  height: 62px;
}
.user-title {
  position: absolute;
  left: 36px;
  bottom: 10px;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #332929;
  line-height: 22px;
}
.subject-title {
  position: absolute;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #fff;
  line-height: 25px;
  top: 20px;
  left: 200px;
  font-size: 18px;
}
.subject-author {
  position: absolute;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #fff;
  line-height: 25px;
  top: 66px;
  left: 400px;
  font-size: 16px;
}
.site {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 147px;
  height: 40px;
  background: #f8f5f5;
  border-radius: 6px;
  opacity: 0.79;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
.title {
  font-size: 14px;
  font-weight: 500;
  color: #332929;
}
.note {
  padding: 30px;
}
.subject {
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #332929;
  transform: translateY(-10px);
}
.hr {
  width: 300px;
  height: 1px;
  background-color: #f5efee;
  margin-top: 10px;
}
.titl {
  margin-top: 15px;
}
.time {
  width: 115px;
  height: 17px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #887e7e;
  line-height: 17px;
  margin-top: 10px;
}
.sub {
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #332929;
  line-height: 22px;
  margin-bottom: 20px;
}
.card {
  background: #fbf7f7;
  border-radius: 8px;
  // padding: 20px;
  cursor: pointer;
}
.item1 {
  display: block;
  background: rgb(0, 118, 255);
  width: 49px;
  height: 49px;
  background: #0076ff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.icon {
  font-size: 32px;
  color: #f8f5f5;
}
.tl {
  margin-top: 15px;
  transform: translateX(20px);
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #332929;
  line-height: 22px;
}
.bottom {
  position: absolute;
  bottom: 20px;
}
.spanlabel {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #887e7e;
  margin-right: 10px;
  vertical-align: super;
}
.spanValue {
  font-size: 36px;
  font-family: DIN-Medium, DIN;
  font-weight: 500;
  color: #332929;
  margin-right: 20px;
}
.icon1{
      width: 50px;
    height: 50px;
    background: #0076ff;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.iconi{
  font-size: 28px;
    color: #f8f5f5;
}
.shou{
 margin-left: 100px;
transform: translateY(-32px);
}
</style>
